import { log } from "node:console";
import React, { Component } from "react";
type inpType = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
interface iState {
  name: string;
  inp: string;
  selectStr: string;
  sex:string
  hobby:string[]
}
export default class App extends Component {
  state: iState = {
    name: "张三",
    inp: "",
    selectStr: "",
    sex:'',
    hobby:[]
  };

  changeValue(e: React.ChangeEvent<inpType>) {
    this.setState({
      [e.target.name]: e.target.value,
    });
  }

  changeHobby=(e: React.ChangeEvent<HTMLInputElement>)=>{
     // 先将原来的数组复制一份
     const arr = [...this.state.hobby]
     if(e.target.checked){
      arr.push(e.target.value)
     }else{
      const index=arr.findIndex(item=>item==e.target.value)
      arr.splice(index,1)
     }
     this.setState({
      hobby:arr
    })
  }

  render() {
    return (
      <div>
        <h1>父组件-{this.state.name}</h1>
        <input
          type="text"
          name="inp"
          value={this.state.inp}
          onChange={(e) => this.changeValue(e)}
        />
        <textarea
          name="inp"
          value={this.state.inp}
          onChange={(e) => this.changeValue(e)}
        ></textarea>

        <hr />
        <div>
          <select
            name="selectStr"
            value={this.state.selectStr}
            onChange={(e) => this.changeValue(e)}
          >
            <option value="烧烤">烧烤</option>
            <option value="西瓜">西瓜</option>
            <option value="苦瓜">苦瓜</option>
            <option value="快餐">快餐</option>
          </select>
          选中的内容为-------- {this.state.selectStr}
        </div>

        <hr />
          <div>
              <input name="sex" value={'男'} type="radio" onChange={e => this.changeValue(e)} /> 男
              <input name="sex" value={'女'} type="radio" onChange={e => this.changeValue(e)} /> 女
              <br />
              ---- 你选择的是：{this.state.sex}
          </div>

          <hr />
                <div>
                    <input name="hobby" onChange={this.changeHobby} type="checkbox" value={'睡觉'} /> 睡觉
                    <input name="hobby" onChange={this.changeHobby} type="checkbox" value={'吃饭'} /> 吃饭
                    <input name="hobby" onChange={this.changeHobby} type="checkbox" value={'写代码'} /> 写代码
                    <input name="hobby" onChange={this.changeHobby} type="checkbox" value={'篮球'} /> 篮球
                    <input name="hobby" onChange={this.changeHobby} type="checkbox" value={'羽毛球'} /> 羽毛球
                    <input name="hobby" onChange={this.changeHobby} type="checkbox" value={'游泳'} /> 游泳
                    <input name="hobby" onChange={this.changeHobby} type="checkbox" value={'跑步'} /> 跑步
                    <input name="hobby" onChange={this.changeHobby} type="checkbox" value={'散步'} /> 散步
                </div>
                {this.state.hobby}


      </div>
    );
  }
}
